<template>
  <div>
    <!--工具类-->

    <Row>
      <i-col :span="24" style="text-align: right">
        <Button type="info" y_condition @click="showEmail" icon="md-mail"
                v-has=tRole.USER_2_103 >发送邮件</Button>
<!--        <Button type="info" y_condition @click="exportTable" icon="ios-download-outline"-->
<!--                v-has=tRole.USER_2_101 >导出用户</Button>-->
        <Button @click="showProxyEmailSites()" style="margin-left: 1rem" v-has=tRole.USER_2_104 icon="ios-mail-outline">跨站推广</Button>
      </i-col>
    </Row>

    <divider></divider>
    <Row style="text-align: left">
      <i-col :span="24" v-has=tRole.USER_2_102 class-name="y_query_right">
          <Input v-model.trim="searchParams.firstName" placeholder="请输入用户名称或编号" clearable
                 class="y_condition"></Input>

        <Input v-model.trim="searchParams.contactEmail" placeholder="请输入用户邮箱" clearable
                 class="y_condition"></Input>

        <Select placeholder="标签" v-model="searchParams.tabId" class="y_condition" style="text-align: left;"
                clearable filterable allow-create @on-clear="searchParams.tabId=null" >
          <Option v-for="tag in tData.tabList" :value="tag.id">{{ tag.name }}</Option>
        </Select>

          <DatePicker @on-change="chooseDate" type="datetimerange" :options="dateRange"
                      placement="bottom-end" placeholder="选择日期" class="y_condition"
                     ></DatePicker>
          <Button type="primary" class="y_condition" icon="md-search" @click="search" >查询</Button>
      </i-col>

    </Row>

    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="userList==null || userList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem >
          <Checkbox v-model="isCheckedAll" @on-change="handleCheckAll">全选</Checkbox>
          <ListSort sort-label="订单量" :sort-by="searchParams.orderBy" sort-value="user_order_count" @change="sortChangeList"></ListSort>
          <ListSort sort-label="购物车" :sort-by="searchParams.orderBy" sort-value="user_cart_count" @change="sortChangeList"></ListSort>
        </ListItem>
        <CheckboxGroup v-model="searchParams.selectedUsers" @on-change="checkChange">
          <ListItem v-for="(item,index) in userList" class="item_hover">
            <i-col flex="auto">
              <div style="display: flex">
                <Checkbox :label="index" :value="item.id">{{ '' }}</Checkbox>
                <div style="display: flex">
                  <img :src="item.avatar!=null&&item.avatar!=''?item.avatar:'https://d1ww9fdmfwkmlf.cloudfront.net/avatar/avatar.jpg'"
                         style="height: 64px" onerror="onerror=null;src='https://d1ww9fdmfwkmlf.cloudfront.net/imgs/image_load_error.jpg'"
                       @click="status.modalImage.url = item.avatar!=null&&item.avatar!=''?item.avatar:'https://d1ww9fdmfwkmlf.cloudfront.net/avatar/avatar.jpg';
                     status.modalImage.isShow = true;"/>
                  <div style="padding-left:10px">
                    <div v-if="$authority('USER-2-210')">
                      <a style="padding:6px 0;font-size:13px" @click="showUserInfo(item.id)">
                        {{item.encodeName}}
                      </a>
                    </div>
                    <div v-else>
                      <span v-text="item.encodeName"></span>
                    </div>
                    <KeyValueView title="注册时间" oneline >
                      <span v-text="$tiyBJTime(item.registertime)"></span>
                      <tag style="margin-left: 0.5rem" v-if="item.tabsName!=''&&item.tabsName!=null" color="blue">{{item.tabsName}}</tag>
                    </KeyValueView>

                    <KeyValueView title="状态"  >
                      <badge :status="item.state==110?'warning':'success'" :text="$getDictLabel('userStateDict',item.state)" />
                    </KeyValueView>
                    <KeyValueView title="国家" v-if="$authority('USER-2-202')"  >
                      {{item.country}}
                    </KeyValueView>
                    <KeyValueView title="注册方式"  online>
                      <span  v-text="$getDictLabel('loginTypeDict',item.thirdParty,'邮箱')"></span>
                    </KeyValueView>
                    <KeyValueView title="订单" v-if="$authority('USER-2-205')"  online >
                      <a v-if="$authority('USER-2-211')&&item.userOrderCount!=0" style="padding:6px;font-size:0.9rem;color:#448aff;font-weight:600" @click="showOrder(index)">
                        {{item.userOrderCount}}
                      </a>
                      <span v-else>{{item.userOrderCount}}</span>
                    </KeyValueView>
                    <KeyValueView title="购物车" v-if="$authority('USER-2-206')"   >
                      <a v-if="$authority('USER-2-212') && item.userCartCount!=0"  style="padding:6px;font-size:0.9rem;color:#448aff;font-weight:600" @click="showCart(index)">
                        {{item.userCartCount}}
                      </a>
                      <span v-else>{{item.userCartCount}}</span>
                    </KeyValueView>

                  </div>
                </div>
              </div>
            </i-col>
            <i-col >
              <div class="item_bottom" style="padding: 0.5rem " >
                <i-button v-if="$authority('USER-2-209')" type="primary" size="small"   @click="showRecordList(item.id)">查看登录记录</i-button>
              </div>
            </i-col>
          </ListItem>
        </CheckboxGroup>
      </div>
    </List>


    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>
    <!--order弹出框-->
    <Modal
      v-model="status.modalOrder.isShow"
      title="查看订单"
      :styles="{top: '20px',bottom:'20px',width:'80%',}"
     :scrollable=false
    >

      <List size="small" border style="margin:0.5rem;text-align: left">
        <div v-if="orderList==null || orderList.length==0">
          <ListItem>
            <div style="width: 100%; text-align: center;">暂无数据</div>
          </ListItem>
        </div>
        <div v-else>
            <ListItem v-for="(item,index) in orderList" class="item_hover">
              <i-col flex="auto">
                <div style="display: flex">
                  <div style="display: flex">
                    <div style="padding-left:10px">
                      <KeyValueView title="编号"  >
                        {{index}}
                      </KeyValueView>
                      <KeyValueView title="订单号"  >
                          <a style="padding:6px;font-size:13px;color:#448aff" @click="getOrderDetail(item.id)" >
                          {{item.serialNumber}}
                          </a>
                      </KeyValueView>
                      <KeyValueView title="国家"  >
                        {{item.countryName}}
                      </KeyValueView>
                      <KeyValueView title="金额($)"  online>
                        {{item.actualPayment}}
                      </KeyValueView>
                      <KeyValueView title="下单时间"  >
                        {{$tiyBJTime(item.createtime)}}
                      </KeyValueView>

                      <KeyValueView title="订单状态"   >
                        {{$getDictLabel('orderStateDict',item.state)}}
                      </KeyValueView>

                    </div>
                  </div>
                </div>
              </i-col>
            </ListItem>
        </div>
      </List>
      <Page :total="searchParams.showOrder.total" :page-size="searchParams.showOrder.pageSize"
            :current="searchParams.showOrder.pageNum" @on-change="changeOrderPage"
            show-elevator/>
    </Modal>
    <!--cart弹出框-->
    <Modal
      v-model="status.modalCart.isShow"
      title="查看购物车"
      :styles="{top: '20px',bottom:'20px',width:'80%',}"
    >
      <List size="small" border style="margin:0.5rem;text-align: left">
        <div v-if="cartList==null || cartList.length==0">
          <ListItem>
            <div style="width: 100%; text-align: center;">暂无数据</div>
          </ListItem>
        </div>
        <div v-else>
          <ListItem>
            <b>总重量:{{tData.cartWeightCount}}<span class="info_key">({{tData.cartWeightCount|numFilter}})</span></b>&nbsp;&nbsp;&nbsp;&nbsp;
            <b>总金额:{{tData.cartPriceCount}}</b>
          </ListItem>
          <ListItem v-for="(item,index) in cartList" class="item_hover">
            <i-col flex="auto">
              <div style="display: flex">
                <div style="display: flex">
                  <div style="padding-left:10px">
                    <div style="display: flex">
                      <img :src="$store.getters.imgPrefix+item.productImgUrl" height="60" @click="showProductImage(item.productImgUrl)" />
                      <div style="margin-left: .5rem">
                        <i-col>
                          <a target="_blank"  :href="$tiyProductUrl(item.productCode)" >
                            {{item.productCode}}
                          </a>
                        </i-col>
                        <KeyValueView title="色卡/尺码"  online>
                          {{item.color+'/'+item.sizeName}}
                        </KeyValueView>

                        <KeyValueView title="当前售价($)"  >
                          {{item.price}}
                        </KeyValueView>
                        <KeyValueView title="数量"  >
                          {{item.amount}}
                        </KeyValueView>
                        <KeyValueView title="重量(g)"  >
                          {{item.weight}}
                        </KeyValueView>
                        <i-col>
                          <KeyValueView title="添加时间"  online >
                            {{$tiyBJTime(item.createtime)}}
                          </KeyValueView>
                        </i-col>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </i-col>
          </ListItem>
        </div>
      </List>


      <div style="text-align: left;">
        <Page :total="searchInfoPage.total" :page-size="searchInfoPage.stepNumber" :current="searchInfoPage.currentPage"
              @on-change="cartChangePage"  show-elevator/>
      </div>
    </Modal>
    <!--地址弹出框-->
    <Modal
      v-model="status.modalAddress.isShow"
      title="查看地址"
      :styles="{top: '20px',bottom:'20px',width:'80%',}"
      :scrollable=false
    >
      <!--表格和分页-->
      <Table stripe border :context="this" :columns="tableAddressTitles" :data="addressList" class="table_css"
             no-data-text="暂无数据" ></Table>

    </Modal>
    <Modal
      v-model="status.modalUserInfo.isShow"
      title="用户详情"  style="font-size:14px"
      :styles="{top: '20px',bottom:'20px',width:'50%'}"
      :scrollable=false >
      <row>
      <i-col :span="4" class="tiy_key" >First Name:</i-col>
      <i-col :span="8">{{searchParams.showUserInfo.firstName}}</i-col>
      <i-col :span="4" class="tiy_key">Last Name:</i-col>
      <i-col :span="8">{{searchParams.showUserInfo.lastName}}</i-col>
      </row>
      <row>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.country">国家:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.country" >{{searchParams.showUserInfo.country}}</i-col>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.phone">联系电话:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.phone">{{searchParams.showUserInfo.phone}}</i-col>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.email">注册邮箱:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.email">{{searchParams.showUserInfo.email}}</i-col>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.contactEmail">联系邮箱:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.contactEmail" >{{searchParams.showUserInfo.contactEmail}}</i-col>
      </row>
      <row>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.facebook">Facebook:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.facebook" >{{searchParams.showUserInfo.facebook}}</i-col>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.instagram">Instagram:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.instagram" >{{searchParams.showUserInfo.instagram}} </i-col>

        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.source">来源:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.source">{{searchParams.showUserInfo.source}}</i-col>
        <i-col :span="4" class="tiy_key" v-if="searchParams.showUserInfo.inviteCode">邀请码:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.inviteCode" >{{searchParams.showUserInfo.inviteCode}}</i-col>
        <i-col :span="4"  class="tiy_key" v-if="searchParams.showUserInfo.useContent">用途:</i-col>
        <i-col :span="8" v-if="searchParams.showUserInfo.useContent">{{searchParams.showUserInfo.useContent}}</i-col>
      </row>
      <row>
        <i-col :span="4" class="tiy_key" >推送与通知:</i-col>
        <i-col :span="4"><Checkbox  v-model="searchParams.showUserInfo.isPushMessage" :disabled=true ></Checkbox>接收消息推送</i-col>
        <i-col :span="4"><Checkbox  v-model="searchParams.showUserInfo.isAdEmail" :disabled=true></Checkbox>接收广告邮件</i-col>
      </row>
      <row >
        <div class="modal_base_div">
          <div class="modal_base_div_title" style="margin-top: 1rem"><strong>用户标签 :</strong></div>
          <i-col :span="24" align="left">
            <Select v-model="searchParams.showUserInfo.tabList"  style="width: 15rem;margin-left: 1.5rem;margin-top: 0.5rem;" filterable multiple  placeholder="用户标签">
              <Option v-for="item in tData.tabList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <Button type="info" style="margin-left: 0.5rem;margin-top: 0.5rem;" @click="saveUserTab()">保存</Button>
          </i-col>
        </div>

      </row>
       <row>
         <div class="modal_base_div" style="width:100%">
           <div class="modal_base_div_title" style="margin-top: 1rem"><strong>用户备注 :</strong></div>
             <Row v-for="(userNote, index) in userNoteList" :key="index" >
               <i-col :span="4" style="min-width:0px" class="tiy_key">{{userNote.name}}:</i-col>
               <i-col :span="16">{{userNote.content}}</i-col>
               <i-col :span="2">
                 <a href="#" @click="removeUserNote(index)" v-has=tRole.USER_2_216>
                   <Icon type="ios-close-circle" size="16" color="red"/>
                 </a>
               </i-col>

             </Row>

           <div style="text-align: center">
             <Button type="info" ghost @click="noteAdd" icon="md-add" style="padding: 0px 1.5rem;margin-top: 2rem" v-has=tRole.USER_2_214>新增一条备注
             </Button>
           </div>
         </div>
      </row>
    </Modal>

    <!-- 发送邮件 -->
    <Modal
      v-model="showEmailState.isShowing"
      title=""
      :mask-closable="false"
      @on-cancel="sendEmailCancel"
      :styles="{top: '20px',bottom:'20px',width:'80%'}">
      <send-email v-bind:receiveUser="showEmailState.selectedUsers" v-bind:isRefresh="showEmailState.isShowing"
                       v-on:listenSendEmailEvent="sendSuccess" :is-send="false"  ref="SendEmail"></send-email>
      <div slot="footer"></div>
    </Modal>


    <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>

    <Modal v-model="status.modalOrderDetail.isShow"
           :styles="{top: '20px',bottom:'20px',width:'90%',}" :scrollable=false>
      <div>
        <Tabs  ref="tabs" style="margin: 10px">
          <TabPane label="订单概况" name="order">
            <Row >
              <i-col :span="8">
                <Card style="margin-right: 20px">
                  <p slot="title">基本信息</p>
                  <div>
                    <p><span class="key">订单编号 : </span> {{orderDetail.serialNumber}}</p>
                    <p><span class="key">订单状态 :</span> {{orderDetail.stateTitle}}</p>
                    <p><span class="key">购买者 :</span> {{orderDetail.userName}}</p>
                  </div>
                </Card>
              </i-col>
              <i-col :span="8">
                <Card style="margin-right: 20px;margin-left: 20px;">
                  <p slot="title">支付信息</p>
                  <p><span class="key">物流配送费 : </span>${{orderDetail.postage}}</p>
                  <p><span class="key">支付方式 : </span>  {{orderDetail.payWayName}}</p>
                  <p><span class="key">应付（含运费）: </span>${{orderDetail.originalPrice}}</p>
                  <p><span class="key">实付（含运费）:</span> ${{orderDetail.actualPayment}}</p>
                </Card>
              </i-col>
              <i-col :span="8">
                <Card style="margin-left: 20px;">
                  <p slot="title">产品信息</p>
                  <p><span class="key">订单项数目 :</span> {{orderDetail.itemCount}}个</p>
                  <p><span class="key">产品总量 :</span> {{orderDetail.productCount}}个</p>
                  <p><span class="key">产品总重 :</span> {{orderDetail.weight}}g</p>
                </Card>
              </i-col>
            </Row>
            <Card style="margin-top: 10px">
              <p slot="title">物流和备注</p>
              <Row>
                <i-col :span="12" ><span class="key">收件人 :</span>{{orderDetail.receiverInfo.userFullName}}</i-col>
                <i-col :span="8"><span class="key">配送方式 :</span> {{orderDetail.deliveryMethodName}}</i-col>
              </Row>
              <Row ><i-col :span="24"><span class="key">备注 :</span> {{orderDetail.note}}</i-col></Row>
              <hr>
              <Row >
                <i-col :span="24">
                  <span class="key">Apt/Suite/Unit :</span> {{orderDetail.receiverInfo.unit}}&nbsp;&nbsp;
                  <span class="key">Street Address :</span> {{orderDetail.receiverInfo.streetAddress}}&nbsp;&nbsp;
                  <span class="key">City :</span> {{orderDetail.receiverInfo.cityName}}&nbsp;&nbsp;
                  <span class="key">State :</span> {{orderDetail.receiverInfo.state}}&nbsp;&nbsp;
                  <span class="key">Country :</span> {{orderDetail.receiverInfo.countryName}}&nbsp;&nbsp;
                  <span class="key">Country Code :</span> {{orderDetail.receiverInfo.countryCode}}&nbsp;&nbsp;
                  <span class="key">Zip Code :</span> {{orderDetail.receiverInfo.postalCode}}
                </i-col>
              </Row>
            </Card>
          </TabPane>
          <TabPane label="包裹概况" name="shipping" style="font-size: 14px">
            <Collapse  style="margin-top: 20px">
              <Panel v-for="(pck, index) in orderDetail.packages" :key="index">
                <span style="width:50%">
                    <span style="width: 100px" v-if="pck.serialNumber == '' || pck.serialNumber == null">
                      未发货产品
                    </span>
                    <span v-else>
                      <span style="margin-left:1rem " class="key">包裹（运单号）:</span>{{pck.waybill}}
                      <span style="margin-left:20px "  class="key"> 状态:</span> <b>{{pck.stateTitle}}</b>
                      <span style="margin-left:20px "  class="key"> 快递公司:</span> <b>{{pck.deliveryCompanyName}}</b>
                    </span>

                  </span>
                <div slot="content">
                  <Row v-for="product in pck.products">
                    <i-col :span="24">
                      <div class="order_product_div" style="margin: 1rem 0rem">
                        <Row class="order_product_row">
                          <i-col :span="3">
<!--                            <img :src="product.productImg" style="width:99%;max-width:80px;max-height:80px;"-->
<!--                                 @click="status.modalImage.url=product.productImg;status.modalImage.isShow = true;"/>-->

                            <img :src="yunPath + (product.zipImages != null ?product.zipImages[0].imagePath : product.originalImagePath)"
                                 style="width:99%;max-width:80px;max-height:80px;"
                                 @click="status.modalImage.url=yunPath + product.originalImagePath;status.modalImage.isShow = true;"/>

                          </i-col>
                          <i-col :span="17">
                            <Row >
                              <strong><span style="margin-left:20px;" class="tiy_key_left">产品编码 : </span>
                                <a target="_blank" :href="$tiyProductUrl(product.productCode)">{{product.productCode}}</a></strong>
                            </Row>
                            <Row  style="margin-top: 0.2rem"><span style="margin-left:20px ">{{product.productName}}</span></Row>
                            <Row  style="margin-top: 0.2rem">
                              <i-col :span="7"><span style="margin-left:20px " class="tiy_key_left">单价 :</span>${{product.actualPrice}}</i-col>
                              <i-col :span="5"><span style="margin-left:20px " class="tiy_key_left">货架 :</span>{{product.shelves}}</i-col>
                              <i-col :span="5"><span style="margin-left:20px " class="tiy_key_left">重量 :</span>{{product.weight}}g</i-col>
                            </Row>
                          </i-col>
                        </Row>
                        <Row><!--表格和分页-->
                          <i-col :span="24">
                          <Table :ref="'product'+pck.id+product.productCode" stripe border :context="this" :columns="orderItemTitles" :data="product.items"
                                 class="table_css"
                                 no-data-text="暂无数据" style="margin:0;"></Table>
                          </i-col>
                        </Row>
                      </div>
                    </i-col>
                  </Row>
                </div>
              </Panel>
            </Collapse>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!--查看订单记录弹出框-->
    <Modal v-model="status.modalUserRecord.isShow" title="订单记录"
           :styles="{align:'center',width:'60%',padding:'2rem'}" :scrollable=true>
      <Row>
        <i-col :span="8">
          <div> <span class="key">产品编号 :</span> {{status.modalUserRecord.info.productCode}}</div>
        </i-col>
        <i-col :span="8">
          <div><span class="key">产品色卡 :</span> {{status.modalUserRecord.info.productColor}}</div>
        </i-col>
        <i-col :span="8">
          <div><span class="key">尺码 :</span> {{status.modalUserRecord.info.productSize}}</div>
        </i-col>
      </Row>
      <!--表格和分页-->
      <Table stripe border :context="this" :columns="recordDetailTitles" :data="selectRecordList"
             class="table_css" no-data-text="暂无数据" ></Table>
    </Modal>

    <Modal
      v-model="noteModal.isShow"
      :title="noteModal.title"
      :mask-closable="false"
      @on-ok="saveNote"
      :loading="noteModal.isLoading">
      <Form :model="note"   :label-width="100" :rules="ruleNote"
            ref="noteForm"  style="margin: 1rem 0px" class="modal_newuser_form"  >
        <div class="modal_base_div" >
          <Row>
            <i-col :span="22">
              <FormItem label="备注名称:" prop="name">
                <Input v-model.trim="note.name" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col :span="22">
            <FormItem label="备注内容 : " prop="content">
              <Input type="textarea" :rows=4 v-model.trim="note.content" placeholder="请输入" class="form_step" ></Input>
            </FormItem>
            </i-col>
          </Row>
        </div>
      </Form>
    </Modal>

    <Modal
      v-model="activeModal.isShow" width="60%"
      title="补充用户基本信息"
      :mask-closable="false"
      @on-ok="actionActive"
      :loading="activeModal.isLoading"  :style="{top: '20px',bottom:'20px',width:'70%'}">
      <Form :model="activeInfo"   :label-width="110" :rules="activeRules"
            ref="activeForm"  style="padding: 0.5rem 1rem "   >

          <Row>
            <i-col :span="12">
              <FormItem label="First Name :" prop="firstName">
                <Input v-model.trim="activeInfo.firstName" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem label="Last Name :" prop="lastName">
                <Input v-model.trim="activeInfo.lastName" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col :span="12">
              <FormItem label="Contact Email :" prop="firstName">
                <Input v-model.trim="activeInfo.contactEmail" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem label="邀请码 :" prop="lastName">
                <Input v-model.trim="activeInfo.inviteCode" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col :span="12">
              <FormItem label="Country:" prop="countryEn">
                <Input v-model.trim="activeInfo.countryEn" readonly placeholder="请选择" @on-click="countrySelect" icon="ios-search-outline"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem label="电话 :" prop="phone">
                <Input v-model.trim="activeInfo.phone" placeholder="电话"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col :span="12">
              <FormItem label="Facebook :" prop="facebook">
                <Input v-model.trim="activeInfo.facebook" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem label="Instagram :" prop="instagram">
                <Input v-model.trim="activeInfo.instagram" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col :span="12">
              <FormItem label="用户类型 :" prop="purcharse">
              <Select v-model="activeInfo.useType"  :clearable=true>
                <Option v-for="item in userTypeDict" :value="item.value" :key="item.value">
                    {{ item.name }}
                </Option>
              </Select>
              </FormItem>
            </i-col>
              <i-col :span="12">
              <FormItem label="用户来源 :" prop="source">
                <Input v-model.trim="activeInfo.source" placeholder="请输入"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col :span="12">

              <FormItem label="通知/广告权限 :" prop="isAdEmail">
                <Checkbox v-model="activeInfo.isAdEmail" >接收广告邮件</Checkbox>
                <Checkbox v-model="activeInfo.isPushMessage" >接收消息推送</Checkbox>
              </FormItem>
            </i-col>
          </Row>
          <Row>
          </Row>

      </Form>
    </Modal>

    <Modal
      v-model="countryModal.isShow"
      :scrollable=true
      @on-ok="selectCountry"
      :title="countryModal.title"
      :styles="{top: '20px',bottom:'20px',width:'80%',maxHeight:600}">
      <a-countrySelect ref="ACountrySelect"  @changeCountry="changeCountry"></a-countrySelect>

    </Modal>
    <UserLoginRecord :user-id="loginRecord.selectedUserId" v-model="loginRecord.showRecordDialog"></UserLoginRecord>

    <!-- 代发其它站点邮件 -->
    <Modal v-model="status.modalProxySites.isShow" title="跨站引流" :mask-closable="false" :footer-hide="proxySites.length === 0">
      <List border>
        <template v-if="proxySites.length === 0">
          <ListItem>
            <div style="width: 100%; text-align: center; color: #ccc;">没有配置代发推广邮件的站点！</div>
          </ListItem>
        </template>
        <template v-else>
          <Alert type="warning">通过B站邮箱向F站昨日的注册用户发送引流邮件。多次点击会导致给同一个用户发送多次</Alert>
          <ListItem v-for="(item, index) in proxySites" :key="index">
            <KeyValueView title="站点" :value="item.siteName"></KeyValueView>
            <KeyValueView title="引流邮箱" :value="item.email"></KeyValueView>
          </ListItem>
        </template>
      </List>
      <div slot="footer">
        <Button @click="hideProxyEmailSites()">取消</Button>
        <Button type="primary" @click="proxyAdEmails()">发送</Button>
      </div>
    </Modal>
  </div>
<!--订单详情-->

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/user/user_data";
  import ACountrySelect from  "../user/CountrySelect.vue";
  import SendEmail from "../email/SendEmailTemplate.vue"
  import KeyValueView from "../widgets/KeyValueView";
  import ListSort from "../widgets/ListSort";
  import UserLoginRecord from "./UserLoginRecord";

  import {
    init,
    webClearOperationRecord,
    webList,
    webOrderList,
    webCartList,
    webAddressList,
    webRecordList,
    exportUser,
    userInfo,
    webOrderDetail,
    webItemRecord,
    saveNote,
    deleteUserNote,
    actionActive
  } from "./js/user/user_funs"
  import TiyPhotoView from "../widgets/TiyPhotoView";
  import Vue from "vue";

  export default {
    //components: {ICol},
    components: {TiyPhotoView, ICol,ACountrySelect,SendEmail,KeyValueView,ListSort,UserLoginRecord},

    data(){
      return {
        tRole:{
          USER_2_101:"USER-2-101",
          USER_2_102:"USER-2-102",
          USER_2_103:"USER-2-103",
          USER_2_104:"USER-2-104",
          USER_2_214:"USER-2-214",
          USER_2_215:"USER-2-215",
          USER_2_216:"USER-2-216"
        },
        tPage: tiyData.tPage,
        searchInfoPage: tiyData.searchInfoPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams,
        tData :tiyData.tData,
        userList: tiyData.tData.userList,
        orderList: tiyData.tData.orderList,
        cartList: tiyData.tData.cartList,
        addressList: tiyData.tData.addressList,
        dateRange: tiyData.tData.dateRange,
        orderItemDict: this.$store.getters.dictionaries.orderStateDict,
        userTypeDict: this.$store.getters.dictionaries.userTypeDict,
        // tableCartTitles: tiyData.cartTableTitles(this),
        tableAddressTitles: tiyData.addressTableTitles,
        orderDetail: tiyData.tData.orderDetail,
        orderItemTitles:tiyData.orderItemTitles(this),
        recordDetailTitles:tiyData.tableUserRecordDetail,
        selectRecordList: tiyData.tData.selectRecord,
        noteModal:tiyData.tStatus.noteModal,
        ruleNote: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ],
          content: [
          {required: true,message: '内容不能为空', trigger: 'blur'}
        ]
        },
        activeRules:{

        },
        userNoteList:tiyData.tParams.userNoteList,
        note:tiyData.tData.note,
        activeInfo:tiyData.tData.activeInfo,
        activeModal:tiyData.tStatus.activeModal,
        countryModal:tiyData.tStatus.countryModal,
        countrySelected:{},
        showEmailState:{// 发送邮件相关的状态
          isShowing:false,
          selectedUsers:[],
        },
        isCheckedAll: false,
        loginRecord:{
          showRecordDialog:false,
          selectedUserId:''
        },
        proxySites: tiyData.tData.proxySites,
        yunPath: this.$store.getters.imgPrefix,
      }
    },
    computed : {

    },
    methods: {

      cartChangePage(page) {
        tiyData.searchInfoPage.currentPage = page;
        webCartList(this, tiyData);
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      showOrder(index){
        tiyData.tParams.showOrder.userId = tiyData.tData.userList[index].id;
        webOrderList(this, tiyData);
      },
      showCart(index){
        tiyData.tParams.showCart.userId = tiyData.tData.userList[index].id;
        webCartList(this, tiyData);
      },
      showAddress(index){
        tiyData.tParams.showAddress.userId = tiyData.tData.userList[index].id;
        webAddressList(this, tiyData);
      },
      showRecord(index){
        tiyData.tParams.showRecord.userId = tiyData.tData.userList[index].id;
        webRecordList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },

      chooseDate(date){
        tiyData.tParams.startEndDate = date;
      },
      changeRecordPage(page){
        tiyData.tParams.showRecord.pageNum = page;
        webRecordList(this, tiyData);
      },
      changeOrderPage(page){
        tiyData.tParams.showOrder.pageNum = page;
        webOrderList(this, tiyData);
      },
      listSelectedChanged(selection){
        //组装发送邮件数据
        let users=[];
        selection.forEach(i=>{
          let user = {
            "id": i.id,
            "encodeName": i.encodeName,
            "contactEmail":i.virtualName,
          };
          users.push(user);
        })
        this.showEmailState.selectedUsers = [...users];
      },
      exportTable(){
        exportUser(this, tiyData);
      },
      showUserInfo(userId){
        userInfo(this,tiyData,userId);
      },
      getOrderDetail(id){
        webOrderDetail(this, tiyData, id);
      },
      webItemRecord(orderItem){
        tiyData.tStatus.modalUserRecord.info.productCode = orderItem.productCode;
        tiyData.tStatus.modalUserRecord.info.productColor = orderItem.color;
        tiyData.tStatus.modalUserRecord.info.productSize = orderItem.sizeName;
        webItemRecord(this, tiyData, orderItem.id);
      },
      noteAdd(){
        this.noteModal.isShow=true;
        this.$refs['noteForm'].resetFields();
        this.note.name='';
        this.note.content='';
        this.note.id='';
      },

      saveNote(){
        saveNote(this,tiyData);
      },
      removeUserNote(index){
        deleteUserNote(this,tiyData,index);
      },
      activeUser(index){
        this.$refs['activeForm'].resetFields();
          tiyData.tData.activeInfo.userId= tiyData.tData.userList[index].id,
          tiyData.tData.activeInfo.firstName=tiyData.tData.userList[index].firstname,
          tiyData.tData.activeInfo.lastName=tiyData.tData.userList[index].lastname,
          tiyData.tData.activeInfo. phoneCode='',
          tiyData.tData.activeInfo. phone='',
          tiyData.tData.activeInfo.  facebook='',
          tiyData.tData.activeInfo. instagram='',
          tiyData.tData.activeInfo.useType='',
          tiyData.tData.activeInfo.source='',
          tiyData.tData.activeInfo.countryCode='',
          tiyData.tData.activeInfo.inviteCode='',
          tiyData.tData.activeInfo.contactEmail='',
          tiyData.tData.activeInfo.isAdEmail=false,
          tiyData.tData.activeInfo. isPushMessage=false
        this.activeModal.isShow=true;
      },
      countrySelect(){
        this.countryModal.isShow=true;
      },
      changeCountry(country){
        this.countrySelected = country;
      },
      selectCountry(){
        this.activeInfo.countryEn=this.countrySelected.countryEn;
        this.activeInfo.countryCode=this.countrySelected.countryCode;
        this.activeInfo.phoneCode=this.countrySelected.phoneCode;
        this.countrySelected={};
        this.$refs.ACountrySelect.clear();

      },
      actionActive(){
        actionActive(this,tiyData);
      },
      showEmail(){
        if(0 == this.showEmailState.selectedUsers.length){
            this.$Message.warning("请先选择要接收邮件的用户");
        }else {
          this.showEmailState.isShowing = true;
        }
      },
      sendSuccess(isSuccess){
        if(isSuccess){
          this.$refs.userInfo.selectAll(false);
          this.showEmailState.isShowing = false;
        }
      },
      sendEmailCancel(){
        this.$refs.userInfo.selectAll(false);
      },
      saveUserTab(){
        let self=this;
        self.$Spin.show();
        let params = {
          tabIds: self.searchParams.showUserInfo.tabList,
          type:2,
          mappingId: self.searchParams.showUserInfo.userId,
        };
        self.$apiOther.updateTabMappings(params).then(response => {
          self.$Spin.hide();
          if(response.success) {
            self.$Message.success("保存成功");
            self.search();
          }else{
            self.$Modal.error(response.errorMessage);
          }
        });
      },

      handleCheckAll() {
        let self = this;
        if (this.isCheckedAll) {
          tiyData.tParams.selectedUsers.splice(0);
          for(let i=0;i<this.userList.length;i++){
            tiyData.tParams.selectedUsers.push(i);
            // self.userSelected.push(this.userList[i].id);
          }
        } else {
          tiyData.tParams.selectedUsers.splice(0);
        }
      },
      checkChange(val) {
        //组装发送邮件数据
        let self = this;
        this.showEmailState.selectedUsers.splice(0);
       if(tiyData.tParams.selectedUsers.length>0){
         let users=[];
         tiyData.tParams.selectedUsers.forEach(i=>{
           let user = {
             "id": self.userList[i].id,
             "encodeName": self.userList[i].encodeName,
             "contactEmail":self.userList[i].virtualName,
           };
           this.showEmailState.selectedUsers.push(user);
         })

       }


        if (tiyData.tParams.selectedUsers.length == this.userList.length) {
          this.isCheckedAll = true;
        } else {
          this.isCheckedAll = false;
        }
      },
      sortChangeList(sortBy){
        tiyData.tPage.total = 1;
        tiyData.tPage.startIndex = 0;
        tiyData.tPage.stepNumber = 20;
        tiyData.tPage.currentPage = 1;
        tiyData.tParams.orderBy = sortBy;
        webList(this,tiyData);
      },
      showRecordList(userId){
        this.loginRecord.showRecordDialog=true;
        this.loginRecord.selectedUserId=userId;
      },
      showProductImage(image){
        this.status.modalImage.url = Vue.prototype.$store.getters.imgPrefix + image;
        this.status.modalImage.isShow = true;
      },
      showProxyEmailSites() {
        this.queryAdSites();
        this.status.modalProxySites.isShow = true;
      },
      hideProxyEmailSites() {
        this.status.modalProxySites.isShow = false;
      },
      queryAdSites() {
        this.$Spin.show();
        this.$apiUser.getProxyAdEmails().then(response => {
          this.$Spin.hide();
          this.proxySites.splice(0);
          if(response.success) {
            if(response.result != null) {
              this.proxySites.push(...response.result);
            }
          }else{
            console.error(response);
            this.$Message.error({content: "查询代发其它站点推广邮件配置失败！"+response.errorMessage, duration: 3});
          }
        }).catch(err => {
          this.$Spin.hide();
          console.error(err);
          this.$Message.error({content:"查询代发其它站点推广邮件配置失败！", duration: 3});
        })
      },
      proxyAdEmails() {
        this.$Spin.show();
        this.$apiUser.proxyAdEmails().then(response => {
          this.$Spin.hide();
          if(response.success) {
            this.status.modalProxySites.isShow = false;
            this.$Message.success("已发送");
          }else{
            console.error(response);
            this.$Message.error({content:"代发失败："+response.errorMessage, duration: 3});
          }
        }).catch(err => {
          this.$Spin.hide();
          console.error(err);
          this.$Message.error({content: "代发失败："+response.errorMessage, duration: 3});
        });
      },
    },
    mounted(){
      init(this, tiyData);
      // if(this.$authority('USER-2-500')){
      //   webList(this, tiyData);
      // }

    },
    filters: {
      numFilter(value) {
        let realVal = (parseFloat(value)/1000).toFixed(3)
        return realVal+"kg"
      }

    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;
  }
  .modal_active_form{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
    @media @mobile{
      min-width: 20px;
    }
  }
  .info_key {
    color: #9e9e9e;
    font-size: 10px;
  }
  .key{
    .tiy_key;
  }

</style>
